import { postCategoryDelete } from '@/api';
import { MciNotification, MciMessageBox, MciSvgIcon } from '@/components/base';
import { ElTooltip, ElPopover } from 'element-plus';
import { AddMenuDecision } from '../AddMenuDecision';
import { AddDecisionLeaf } from '../AddDecisionLeaf';

export const AddDecision = defineComponent({
  props: {
    adminBtn: {
      type: Boolean,
      default: false
    },
    categoryId: {
      type: String,
      default: ''
    },
    categoryName: {
      type: String,
      default: ''
    },
    versionFlow: {
      type: Object,
      default: () => {}
    },
    permissionRoles: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['refreshList'],
  setup(props, { emit }) {
    // const params = ref({} as any);
    const visible = ref(false);
    const openSetting = ref(false);
    // const loading = ref(false);
    // const formRef = ref<InstanceType<typeof ElForm>>();
    // const router = useRouter();

    // const confirmHandle = async () => {
    //   try {
    //     await formRef.value?.validate();
    //     loading.value = true;
    //     const data = {
    //       ...params.value,
    //       categoryId: props.categoryId
    //     };
    //     const flowId = await postDecisionFlowAdd(data);
    //     emit('refreshList');
    //     visible.value = false;
    //     MciNotification.success({ title: '添加成功' });
    //     router.push({ name: 'DecisionFlow', query: { flowId, categoryId: props.categoryId } });
    //   } catch (error) {
    //   } finally {
    //     loading.value = false;
    //   }
    // };

    const deleteMenu = async () => {
      MciMessageBox.confirm('是否确定删除目录？该目录下的所有决策都将会被删除。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        postCategoryDelete({ id: props.categoryId }).then(() => {
          MciNotification.success({
            title: '操作成功'
          });
          emit('refreshList');
        });
      });
    };

    // watch(
    //   () => visible.value,
    //   (val) => {
    //     if (!val) {
    //       formRef.value?.resetFields();
    //     }
    //   }
    // );

    const addMenuTitle = ref('');

    return () => (
      <>
        <div class="flex gap-12">
          {props.permissionRoles?.configRole && (
            <ElTooltip placement="bottom" content="新增决策">
              <MciSvgIcon
                name="plus"
                onClick={(e) => {
                  visible.value = true;
                  e.stopPropagation();
                }}
                class="cursor-pointer"
              />
            </ElTooltip>
          )}
          {(props.adminBtn || props.permissionRoles?.configRole) && (
            <ElPopover popperClass="popover-node-list" trigger="click">
              {{
                reference() {
                  return (
                    <div onClick={(e) => e.stopPropagation()} class="cursor-pointer">
                      <ElTooltip placement="bottom" content="更多">
                        <MciSvgIcon name="more" class="cursor-pointer" />
                      </ElTooltip>
                    </div>
                  );
                },
                default() {
                  return (
                    <div class="flex flex-col gap-2 node-list">
                      <div
                        class="flex items-center base-node-content"
                        onClick={() => {
                          openSetting.value = true;
                          addMenuTitle.value = '重命名';
                        }}>
                        <MciSvgIcon name="edit" width={18} class="ml-8" color="var(--color-grey-4)" />
                        <span class="label ml-8">重命名</span>
                      </div>
                      {props.adminBtn && (
                        <div class="flex items-center base-node-content" onClick={deleteMenu}>
                          <MciSvgIcon name="delete" width={18} class="ml-8" color="var(--color-grey-4)" />
                          <span class="label ml-8">删除</span>
                        </div>
                      )}
                      {props.adminBtn && (
                        <div
                          class="flex items-center base-node-content"
                          onClick={() => {
                            openSetting.value = true;
                            addMenuTitle.value = '修改目录';
                          }}>
                          <MciSvgIcon name="setting" width={18} class="ml-8" color="var(--color-grey-4)" />
                          <span class="label ml-8">权限设置</span>
                        </div>
                      )}
                    </div>
                  );
                }
              }}
            </ElPopover>
          )}
        </div>

        {visible.value && (
          <AddDecisionLeaf
            title={'新增决策'}
            parentId={props.categoryId}
            parentName={props.categoryName}
            onUpdate:modelValue={(val) => {
              visible.value = val;
            }}
            onRefreshList={() => {
              visible.value = false;
              emit('refreshList');
            }}
          />
        )}

        <AddMenuDecision
          v-model={openSetting.value}
          title={addMenuTitle.value}
          categoryName={props.categoryName}
          categoryId={props.categoryId}
          onRefreshList={() => {
            emit('refreshList');
          }}
        />
      </>
    );
  }
});
